<template>
	<view class="person">
		<view class="person_top" :style="[style]">
			<image class="top_bg" src="@/static/images/wo_background.jpg" mode=""></image>
			<view class="content">
				<view class="con_top">
					<template v-if="token">
						<<!-- view class="top_img">
							<image :src="userinfo.avatar || avtar" mode=""></image>
							<text @click="infoBtn">个人主页</text>
						</view>
						<view class="top_name">{{userinfo.username}}<text>/ {{userinfo.mobile}}</text></view>
						<view class="top_rz">
							<view class="rz_text" :class="userinfo.is_certification==1?'rz_text_no':''">
								<image v-if="userinfo.is_certification==1" src="@/static/images/rz_icon_no.png" mode=""></image>
								<image v-if="userinfo.is_certification==2" src="@/static/images/rz_icon.png" mode=""></image>
								<text>{{userinfo.is_certification==1?'待认证':'已认证'}}</text>
							</view>
						</view> -->
					</template>
					<!-- <template v-else>
						<view class="top_img" @click="signBtn">
							<image src="@/static/images/headerImage.png" mode=""></image>
						</view>
						<view class="top_btn" @click="signBtn">登录/注册</view>
					</template> -->
				</view>
				<!-- <view class="con_bot">
					<view class="left">
						<image src="@/static/images/tjr_icon.png" mode="aspectFill"></image>
						<text>我的推荐人</text>
					</view>
					<view class="right">{{token?userinfo.referrer:'--'}}</view>
				</view> -->
			</view>
		</view>
		<!--  -->
		<view class="person_nav">
			<!-- 只有店长才有 -->
			<view class="nav_list" @click="tixianBtn" v-if="userinfo.level==4">
				<view class="left">
					<image src="@/static/images/left_icon10.png" mode=""></image>
					<text>提现审核</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="timeBtn" v-if="userinfo.level==4">
				<view class="left">
					<image src="@/static/images/left_icon7.png" mode=""></image>
					<text>编辑抢购时间</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="levelBtn" v-if="userinfo.level==4">
				<view class="left">
					<image src="@/static/images/left_icon8.png" mode=""></image>
					<text>等级审核</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="orderBtn" v-if="userinfo.level==4">
				<view class="left">
					<image src="@/static/images/left_icon9.png" mode=""></image>
					<text>订单审核</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<!--  -->
			<view class="nav_list" @click="addressBtn">
				<view class="left">
					<image src="@/static/images/left_icon1.png" mode=""></image>
					<text>个人开户</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="passwordBtn">
				<view class="left">
					<image src="@/static/images/left_icon2.png" mode=""></image>
					<text>企业开户</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="feedbackBtn">
				<view class="left">
					<image src="@/static/images/left_icon3.png" mode=""></image>
					<text>充值</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="helpBtn">
				<view class="left">
					<image src="@/static/images/left_icon4.png" mode=""></image>
					<text>提现</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<!-- <view class="nav_list" @click="systemBtn">
				<view class="left">
					<image src="@/static/images/left_icon5.png" mode=""></image>
					<text>关于系统</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="show=true">
				<view class="left">
					<image src="@/static/images/left_icon6.png" mode=""></image>
					<text>退出登录</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view> -->
		</view>
		<!-- 退出登录 -->
		<u-popup v-model="show" mode="center" border-radius="16" width="590rpx" height="350rpx">
			<view class="popup_box">
				<view class="title">温馨提示</view>
				<view class="text">确认要退出登录？</view>
				<view class="btn">
					<text class="btn_left" @click="show=false">取消</text>
					<text class="btn_right" @click="defineBtn">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				topNumber:0,
				avtar:require('@/static/images/headerImage.png'),
				rz_type:1,//1待认证 2已认证
				// 退出登录
				show:false
			};
		},
		computed:{
			...mapState({
				token: state => state.token,
				userinfo: state => state.userinfo
			}),
			style(){
				return {
					paddingTop: this.topNumber+'px'
				}
			}
		},
		onLoad() {
			// 获取状态栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.topNumber=res.statusBarHeight
				}
			});
		},
		onShow() {
			this.$store.dispatch('GetUserInfo')
		},
		onHide(){
			this.show=false
		},
		methods:{
			// 登录
			signBtn(){
				uni.navigateTo({
					url:'/pages/signIn/sign_in'
				})
			},
			// 个人主页
			infoBtn(){
				uni.navigateTo({
					url:'/pages/person/person_info'
				})
			},
			// 提现审核
			tixianBtn(){
				uni.navigateTo({
					url:'/pages/person/person_tixian'
				})
			},
			// 编辑抢购时间
			timeBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/edit_flash_time'
					})
				}else{
					this.signBtn()
				}
			},
			// 等级审核
			levelBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_level'
					})
				}else{
					this.signBtn()
				}
			},
			// 订单审核
			orderBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_order'
					})
				}else{
					this.signBtn()
				}
			},
			// 收货地址
			addressBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_info_phone'
					})
				}else{
					this.signBtn()
				}
				
			},
			// 修改密码
			passwordBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_password'
					})
				}else{
					this.signBtn()
				}
				
			},
			// 我要反馈
			feedbackBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_feedback'
					})
				}else{
					this.signBtn()
				}
				
			},
			// 使用帮助
			helpBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_help'
					})
				}else{
					this.signBtn()
				}
				
			},
			// 关系系统
			systemBtn(){
				if(this.token){
					uni.navigateTo({
						url:'/pages/person/person_system'
					})
				}else{
					this.signBtn()
				}
				
			},
			// 去登录
			signBtn(){
				uni.showModal({
					title: '提示',
					confirmColor:'#26C281',
					confirmText:'去登录',
					content: res.data.msg,
					success: function (res) {
						if (res.confirm) {
							uni.reLaunch({
								url:'/pages/signIn/sign_in'
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			// 退出登录确定
			defineBtn(){
				this.show=false
				this.$store.commit('SET_TOKEN','')
				this.$store.commit('SET_INFO','')
				uni.reLaunch({
					url:'/pages/signIn/sign_in'
				})
			},
		}
	}
</script>

<style lang="less">
	page{
		background: #fff;
	}
	.person{
		width: 100%;
		.person_top{
			position: relative;
			width: 100%;
			height: 540rpx;
			.top_bg{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				display: block;
				width: 100%;
				height: 540rpx;
			}
			.content{
				position: relative;
				z-index: 2;
				width: 100%;
				height: 100%;
				padding: 40rpx 32rpx 0;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.con_top{
					width: 100%;
					padding: 0 24rpx;
					.top_img{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						image{
							display: block;
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
							border: 2rpx solid #FFFFFF;
						}
						text{
							display: block;
							width: 176rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							font-size: 28rpx;
							font-weight: 500;
							color: #FFFFFF;
							background: #26C281;
							border-radius: 30rpx;
						}
					}
					.top_btn{
						width: 100%;
						padding-top: 40rpx;
						font-size: 40rpx;
						color: #666;
						font-weight: 500;
					}
					.top_name{
						width: 100%;
						margin-top: 24rpx;
						display: flex;
						align-items: flex-end;
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222222;
						text{
							padding-left: 10rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #4E5969;
						}
					}
					.top_rz{
						width: 100%;
						margin-top: 20rpx;
						display: flex;
						.rz_text{
							padding: 0 16rpx;
							height: 42rpx;
							border-radius: 21rpx;
							background: linear-gradient(90deg, #6B6152 0%, #4E4942 100%);
							display: flex;
							align-items: center;
							image{
								display: block;
								width: 32rpx;
								height: 32rpx;
							}
							text{
								padding-left: 5rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
						.rz_text_no{
							background: linear-gradient(90deg, #D8D8D8 0%, #B4B4B4 100%);
						}
					}
				}
				.con_bot{
					width: 100%;
					height: 96rpx;
					padding: 0 28rpx;
					background: linear-gradient(90deg, #F4E6D7, #F9F4DE);
					border-radius: 16rpx 16rpx 0px 0px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						image{
							display: block;
							width: 40rpx;
							height: 40rpx;
						}
						text{
							padding-left: 12rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #666666;
						}
					}
					.right{
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
					}
				}
			}
		}
		// 
		.person_nav{
			width: 100%;
			padding-top: 20rpx;
			.nav_list{
				width: 100%;
				height: 100rpx;
				padding: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
					text{
						padding-left: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
				.right{
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.popup_box{
		width: 100%;
		height: 100%;
		padding: 40rpx 0;
		background: red;
		background: linear-gradient(to bottom, rgba(38, 194, 129, 0.20), rgba(38, 194, 129, 0), rgba(38, 194, 129, 0));
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.title{
			width: 100%;
			font-size: 36rpx;
			text-align: center;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}
		.text{
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.btn{
			width: 100%;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			text{
				display: block;
				width: 247rpx;
				height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn_left{
				color: #999;
				border: 1px solid #999999;
			}
			.btn_right{
				color: #fff;
				background: #26C281;
			}
		}
	}
</style>
